<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性容器css属性</title>
    <meta name="keywords" content="HTML5,前端,css3"/>
    <meta name="description" content="“display:flex”新出的替代float浮动属性"/>
    <link rel="stylesheet" href="/css/reset.css">

    <style>

        ul{
            width: 800px;

            display:flex; /* 开启弹性容器 */
            /* (弹性盒、伸缩盒)后续替代浮动属性、是未来的趋势、不过旧版浏览器不支持 
                flex: 块级弹性容器
                inline-flex: 行内弹性容器
            */
            
            flex-direction: row; 
                /*  flex-direction 指定弹性容器里面的弹性元素的排列方向
                        row: 默认值,从左向右
                        row-reverse: 从右向左
                        column: 从上向下
                        column-reverse: 从下向上
                */

            border: 1px solid red;
            margin: auto;
        }

        li{
            width: 100px;
            height: 100px;
            font-size: 50px;
            text-align: center;
            flex-shrink: 0;
            flex-grow: 0; 
                /* flex-grow 指定弹性元素的伸展系数
                    当父元素有多余空间的时,子元素如何伸展
                    父元素的剩余空间,会按照比列进行分配
                    0 默认不分配,1,2,3 ...数越大分配越多
                */
        }
        li:nth-child(1){
                background-color: #bfa;
                flex-grow: 1;
        }
        li:nth-child(2){
                background-color: pink;
                flex-grow: 2;
        }
        li:nth-child(3){
                background-color: orange;
                flex-grow: 3;
        }

    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    aaa
</body>
</html>